<template>
    <div class="textInput">
      <el-autocomplete
        :type="type"
        :rows="rows"
        :autosize="autosize"
        :clearable="clearable"
        :size="size"
        :class="[className,'w100 relative']"
        popper-class="my-autocomplete"
        v-model="stateValue"
        :fetch-suggestions="querySearch"
        :placeholder="placeholder"
        @select="handleSelect">
        <!-- <i
            class="el-icon-edit el-input__icon"
            slot="suffix"
            @click="handleIconClick">
        </i> -->
        <template slot-scope="{ item }">
            <div class="name">{{ item.value }}</div>
        </template>
      </el-autocomplete>
      <i
        v-show="clearable && stateValue && type=='textarea'"
        class="clearButton el-input__icon el-icon-circle-close el-input__clear"
        @click.prevent="stateValue=''"
      />
    </div>
</template>

<script>
  export default {
    // 带输入建议组件
    name:'AutoCompleteCustom',
    props:{
      restaurants: {
          type: Array,
          default: () => {
            return []
          }
      },
      state: {
          type: String,
          default: ''
      },
      size: {
          type: String,
          default: ''
      },
      placeholder: {
          type: String,
          default: ''
      },
      clearable: {
        type: Boolean,
        default: true
      },
      type: {
        type: String,
        default: 'text'
      },
      rows: {
        type: Number,
        default: 1
      },
      autosize: {
        type: Object,
        default: function() {
          return {}
        }
      },
      className: {
        type: String,
        default: ''
      },
    },
    data() {
      return {
        stateValue: ''
      };
    },
    watch:{
      // 控件清空字段
      stateValue(oldVal,newVal){
        // console.log('oldVal',oldVal)
        // console.log('newVal',newVal)
        if(oldVal == ''){
          this.$emit('handleSelect',{
            value: ''
          })
        }else{
          this.$emit('handleSelect',{
            value: oldVal
          })
        }
      },
      state(oldVal,newVal){
        // console.log('oldVal1',oldVal)
        // console.log('newVal1',newVal)
        if(!oldVal){
          this.$emit('handleSelect',{
            value: ''
          })
        }else{
          this.stateValue = oldVal
        }
      },
    },
    methods: {
      querySearch(queryString, cb) {
        var restaurants = this.restaurants;
        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
        // 调用 callback 返回建议列表的数据
        cb(results);
      },
      createFilter(queryString) {
        return (restaurant) => {
          return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      },
      handleSelect(item) {
        console.log(item);
        this.stateValue = item.value
        // 返回修改后字眼以及修改字段
        this.$emit('handleSelect',item)
      },
      // handleIconClick(ev) {
      //   console.log(ev);
      // }
    },
    mounted(){
        // this.stateValue = this.state
    }
  }
</script>

<style lang="less" scoped>
.my-autocomplete {
  li {
    line-height: normal;
    padding: 7px;

    .name {
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .addr {
      font-size: 12px;
      color: #b4b4b4;
    }

    .highlighted .addr {
      color: #ddd;
    }
  }
}

.textInput {
  position: relative;

  .clearButton {
    position: absolute;
    border-radius: 5px;
    right: 3px;
    z-index: 2;
    border: none;
    top: -3px;
    height: 40px;
    cursor: pointer;
    color: #ccc;
    transform: translateX(2px);
  }

  .clearButton:hover {
    color: #878d99;
  }
}
</style>
